<template>
	<view class="feedback">
		<NavBar title="意见反馈"/>
		<view class="form-box">
			<view class="upload">
				<view class="title"> 请上传图片 </view>
				<view class="imgs">
					<view class="img" v-for="img in imgs" :key="img">
						<image :src="img" mode="aspectFill" class="img"/>
					</view>
					<view class="add flex-center" @tap="upload">
						<wd-icon name="add" size="22px" color="#999"/>
					</view>
				</view>
			</view>
			<view class="textarea">
				<view class="title"> 反馈信息 </view>
				<textarea class="txt" v-model="formData.content" placeholder="请输入要反馈的信息" />
			</view>
			<view class="btn-box">
				<wd-button class="btn" @tap="submit"> 上传 </wd-button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	import NavBar from '@/components/NavBar.vue';
	import { uploadApi, feedbackApi } from '@/api'
	import { useUserStore } from '@/store'
	const formData = ref({
		imgs: '',
		content: ''
	})
	const imgsId = ref([])
	const imgs = ref([]) // 此字段仅做展示
	const upload = () =>{
		uploadApi().then(res =>{
			const { data, status, message } = res
			if(status == '200') {
				imgs.value.push(data.url)
				imgsId.value.push(data.id)
				formData.value.imgs = imgsId.value.join()
			} else {
				uni.showToast({
					icon: 'none',
					title: message
				})
			}
		})
	}
	const submit = () =>{
		const { userInfo } = useUserStore()
		if(!formData.value.content) return uni.showToast({ icon: 'none', title: '请输入反馈信息' })
		const params = {
			...formData.value,
			uid: userInfo.uid
		}
		feedbackApi(params).then(res => {
			uni.showToast({ icon: 'none', title: '反馈成功' })
			uni.navigateBack()
		}).catch(err =>{
			uni.showToast({ icon: 'none', title: '反馈失败' })
		})
	}
</script>

<style lang="scss" scoped>
	.feedback {
		padding: 20rpx 24rpx;
		.form-box {
			padding: 20rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.upload {
				margin-bottom: 30rpx;
				padding-bottom: 20rpx;
				border-bottom: 1px solid #f8f8f8;
				.title {
					font-size: 30rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}
				.imgs {
					gap: 20rpx;
					display: grid;
					grid-template-columns: repeat(6, 1fr);
					.img, .add {
						width: 88rpx;
						height: 88rpx;
						border-radius: 10rpx;
					}
					.add {
						display: flex;
						background-color: #f8f8f8;
					}
				}
			}
			.textarea {
				margin-bottom: 30rpx;
				.title {
					font-size: 30rpx;
					font-weight: bold;
					margin-bottom: 20rpx;
				}
				.txt {
					width: 100%;
					font-size: 24rpx;
					padding: 20rpx;
					border-radius: 20rpx;
					background-color: #f8f8f8;
				}
			}
			.btn-box {
				width: 100%;
				display: flex;
				justify-content: center;
				.btn {
					width: 60%;
					margin: 20rpx 0;
				}
			}
		}
	}

</style>
